<!-- 康复机构详情 -->
<template>
  <el-card>
    <el-page-header @back="$router.go(-1)" content="康复救助机构详情" />
    <div class="app-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="机构名称">{{currentData.name}}</el-descriptions-item>
            <el-descriptions-item label="机构地址">{{currentData.address}}</el-descriptions-item>
            <el-descriptions-item label="机构联系人">{{currentData.linkman}}</el-descriptions-item>
            <el-descriptions-item label="联系方式">{{currentData.phone}}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{currentData.createTime}}</el-descriptions-item>
<!--            <el-descriptions-item label="救助类型">-->
<!--              <el-tag size="small">{{ currentData.recoveryType | keyText("kfjgjzlx") }}</el-tag>-->
<!--            </el-descriptions-item>-->
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="康复救助对象" name="second">
          <el-row class="mt10">
            <el-form ref="form" :model="searchDto" inline label-width="60px" label-suffix=":">
              <el-form-item label="关键字" prop="keywords">
                <el-input v-model="searchDto.keywords" placeholder="请输入关键字" style="width:250px" />
              </el-form-item>
              <el-form-item label="时间" label-width="90px">
                <el-date-picker
                  v-model="date"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="yyyy年MM月dd日"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-s-open" type="primary" @click="clear">重置</el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-upload2"
                  type="success"
                  :loading="loading"
                  @click="exportXlsx()"
                >导出
                </el-button>
              </el-form-item>
            </el-form>
          </el-row>
          <page-table
            ref="table"
            :page-data="pageData"
            :loading="loading"
            :do-get-page-data="getPageData"
          >
            <el-table-column type="index" label="编号" width="80" align="center" />
            <el-table-column prop="recoveryName" label="康复救助对象" align="center" />
            <el-table-column prop="guardianName" label="监护人姓名" align="center" />
            <el-table-column prop="guardianPhone" label="监护人联系方式" align="center" />
            <el-table-column prop="guardianIdCard" label="监护人身份证号" align="center" />
            <el-table-column prop="createTime" label="创建时间" align="center" />
          </page-table>
        </el-tab-pane>
        <el-tab-pane label="康复救助记录" name="third" v-if="currentData.deviceSn">
          <el-row class="mt10">
            <el-form ref="form1" :model="searchDto" inline label-width="60px" label-suffix=":">
              <el-form-item label="关键字" prop="keywords">
                <el-input v-model="searchDto.keywords" placeholder="请输入关键字" style="width:250px" />
              </el-form-item>
              <el-form-item label="时间" label-width="90px">
                <el-date-picker
                  v-model="date"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="yyyy年MM月dd日"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-s-open" type="primary" @click="clear">重置</el-button>
              </el-form-item>
            </el-form>
          </el-row>
          <page-table
            ref="table"
            :page-data="pageData1"
            :loading="loading"
            :do-get-page-data="getPageData1"
          >
            <el-table-column type="index" label="编号" width="80" align="center" />
            <el-table-column prop="userName" label="姓名" align="center" />
            <el-table-column prop="checkTime" label="打卡时间" align="center" />
            <el-table-column prop="deviceName" label="设备名称" align="center" />
            <el-table-column prop="deviceSn" label="设备SN码" align="center" />
          </page-table>
        </el-tab-pane>
        <el-tab-pane label="视频直播" name="fourth" v-if="currentData.videoUrl && currentData.token">
          <el-descriptions title="视频直播(双击全屏观看)" class="mt20" />
          <iframe
            :src="iframeUrl"
            width="600"
            height="400"
            id="ysOpenDevice"
            allowfullscreen
          ></iframe>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
</template>
<script>

export default {
  name: 'OrgDetail',
  data() {
    return {
      currentData: {},
      searchDto: {},
      date: [],
      iframeUrl: null,
      pageData: {},
      pageData1: {},
      loading: false,
      activeName: 'first'
    }
  },
  methods: {
    exportXlsx() {
      this.loading = true
      if (this.date) {
        this.searchDto.startTime = this.date[0];
        this.searchDto.endTime = this.date[1];
      }
      Object.assign(this.searchDto, { instituteId: this.currentData.id })
      let fileDownload = require("js-file-download");
      this.ExportApi.exportInstituteRecoveryListByInsId(this.searchDto).then(res=>{
        this.loading = false
        fileDownload(res.data, "儿童康复救助申请.xlsx");
        this.success('导出成功')
      })
    },

    async getOrgDetail() {
      const { id } = this.$route.query
      this.API.getRecoveryInstituteById({ id }).then(async ret => {
        this.currentData = await ret.data;
        this.iframeUrl = 'https://open.ys7.com/ezopen/h5/iframe?url=' + (ret.data.videoUrl || '') + '&autoplay=1&accessToken=' + (ret.data.token || '')
      });
    },

    handleClick(v) {
      this.searchDto = {}
      this.date = []
      switch (v.name) {
        case 'first':
          this.getOrgDetail()
          break
        case 'second':
          this.getPageData()
          break
        case 'third':
          this.getPageData1()
          break
      }
    },
    search() {
      this.activeName === 'second' ? this.getPageData() : this.getPageData1();
    },
    clear() {
      this.searchDto = {}
      this.date = []
      this.activeName === 'second' ? this.getPageData() : this.getPageData1();
    },
    getPageData(val) {
      let tem = Object.assign({ instituteId: this.currentData.id }, this.searchDto, val);
      if (this.date) {
        tem.startTime = this.date[0];
        tem.endTime = this.date[1];
      }
      this.API.getInstituteRecoveryByInsIdPageList(tem).then(res => {
        this.pageData = res.data;
      });
    },
    getPageData1(val) {
      let tem = Object.assign({ instituteId: this.currentData.id }, this.searchDto, val);
      if (this.date) {
        tem.startTime = this.date[0];
        tem.endTime = this.date[1];
      }
      this.API.getRecoveryRecordPageList(tem).then(res => {
        this.pageData1 = res.data;
      });
    }
  },
  mounted() {
    this.getOrgDetail()
  }
}
</script>
<style scoped lang="scss">
  .app-container {
    padding: 20px;
    margin-top: 10px;
  }
</style>
